<template>
  <div class="header">
    <h1>网站名</h1>
    <ul>
      <li v-for="(item,index) in topNav" :key="index">
        <nuxt-link :to="item.path" :class="index === getIndex?'nuxt-link-exact-active nuxt-link-active':''">
          {{ item.name }}
        </nuxt-link>
      </li>
      <!-- <img :src="avatar" alt="" class="img_wh"> -->

      <!-- 解决登陆完成头像vuex刷新，img无法渲染的问题  -->
      <client-only>
        <div v-show="avatar">
          <img :src="avatar" alt="" class="img_wh">
        </div>
      </client-only>
      <div v-show="!avatar">
        登录
      </div>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      topNav: [
        { name: '首页', path: '/' },
        { name: '新闻', path: '/new' },
        { name: '嵌套路由', path: '/parent/square' },
        { name: '关于我们', path: '/about' }
      ]
    }
  },
  computed: {
    ...mapState('token', {
      avatar: 'avatar', // state数据获取方式二
      getIndex: 'getIndex' // 当前被激活的导航，最好使用父子组件传参
    })
  }
}
</script>
<style scoped lang="scss">
h1{
  width: 300px;
}
.header{
  ul{display: flex;width: 1300px;margin: 0 auto;}
}

li a{
  display: inline-block;
  color: #000;
  margin: 0 20px;
}
.nuxt-link-exact-active {
  color: red;
}
.img_wh{
  width: 30px;
  height: 30px;
}
</style>
